<style>
  .body-container section》.title {
    color: #929BA8;
    font-weight: 500;
    margin: 14px 0 10px 0;
  }

  .body-container section ul {
    display: flex;
    margin-bottom: 16px;
  }

  .body-container section .row-3 li {
    width: 260px;
    margin-right: 10px;
    color: #666;
  }

  .body-container section ul li span {
    color: #999;
    display: inline-block;
    margin-right: 10px;
  }

  .block {
    width: 100%;
    height: 1px;
    background: #F2F2F2;
    margin: 30px 0;
  }

  .Abstract {
    display: flex;
    align-items: flex-start
  }
</style>
<main class="pl-24 pr-24" id="voucherDetail">
  <header class="hl-list-title">
    <h4>凭证详情</h4>
  </header>
  <div class="body-container">
    <section>
      <div class="title">凭证信息</div>
      <ul class="row-3">
        <li><span>会计年：</span>{{data.voucherYear || '--'}}</li>
        <li><span>会计期间：</span>{{data.voucherPeriod || '--'}}</li>
        <li><span>凭证日期：</span>{{data.voucherDate | formatDate}}</li>
      </ul>
      <ul class="row-3">
        <li><span>业务类型：</span>{{data.voucherBizCategoryName || '--'}}</li>
      </ul>
      <ul class="row-3">
        <li><span>业务日期：</span>{{data.documentingDate | formatDate}}</li>
        <li><span>凭证类别：</span>{{data.voucherTypeName || '--'}}</li>
        <li><span>创建人：</span>{{data.documentingUserName || '--'}}</li>
      </ul>
    </section>
    <div v-for="item in data.details" v-if="data.details && data.details.length">
      <section>
        <div class="title">{{item.type == 'DEBTOR'?'借方':'贷方'}}</div>
        <ul class="row-3">
          <li><span>科目编码：</span>{{item.subjectVal || '--'}}</li>
          <li><span>借方金额：</span>{{item.borrowAmount || '--'}}</li>
          <li><span>贷方金额：</span>{{item.loanAmount || '--'}}</li>
        </ul>
        <ul>
          <li class="Abstract">
            <span style="min-width: 35px">摘要：</span>
            <div>
              <span style="color: #666;"
                v-if="item.summaryValue && item.summaryValue.length">{{getText(item.summaryValue)}}</span>
              <span v-else>--</span>
            </div>
          </li>
        </ul>
        <div class="dy-flex" style="justify-content: flex-end;color: #337ab7;"><span
            @click="item.isShow = !item.isShow">{{item.isShow?'收起':'展开'}}辅助账</span></div>
        <div v-if="item.isShow" class="hl-global-detail-box">
          <div class="hl-row">
            <div class="hl-row-item">
              <div class="title">业务日期：</div>
              <div class="item">{{date}}</div>
            </div>
            <div class="hl-row-item">
              <div class="title">摘要：</div>
              <div class="item">{{getText(item.summaryValue)}}</div>
            </div>
          </div>
          <div class="hl-row" style="flex-wrap: wrap;">
            <div class="hl-row-item" v-for="el in item.assists">
              <div class="title">{{el.assistTypeVal}}：</div>
              <div class="item">{{el.assistCode}},{{el.assistName}}</div>
            </div>
          </div>
        </div>
      </section>
      <div class="block"></div>
    </div>
    <section>
      <div class="title">业务信息</div>
      <ul class="row-3" v-if="!data.intentCode">
        <li><span>客户名称：</span><a @click="goToCustomer">{{data.customerName || '--'}}</a></li>
        <li><span>合同名称：</span>{{data.contractName || '--'}}</li>
        <li><span>合同管理编号：</span><a @click="goToContract">{{data.contractMCode || '--'}}</a></li>
      </ul>
      <ul class="row-3" v-if="data.intentCode">
        <li><span>客户名称：</span><a @click="goToCustomer">{{data.customerName || '--'}}</a></li>
        <li><span>意向书编号：</span>{{data.intentCode || '--'}}</li>
      </ul>
      <ul class="row-3">
        <li v-if="data.billNo">
          <span>账单编号：</span>
          <a @click="goToBill('N')">{{data.billNo}}</a>
          <a @click="goToBill('M')" v-if="data.monthBillNo">{{data.monthBillNo}}</a>
        </li>
        <li><span>费项：</span>{{data.expenseName || '--'}}</li>
      </ul>
      <ul>
        <li><span style="width: auto">出租资源：</span>
          <a v-for="(item,index) in data.units" @click="goToUnit(item.unitId)"
            v-if="data.units.length">{{item.projectName +'-'+ item.buildingName +'-'+ item.floorName +'-'+ item.unitName}}
            <span v-if="index < data.units.length-1">,</span></a>
          <span v-if="!(data.units.length)">--</span>
        </li>
      </ul>
    </section>
  </div>
</main>
<script src="modules/voucher/scripts/detail.js" type="text/javascript" charset="utf-8"></script>